<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.codecoord.com" %>
<!DOCTYPE html>
<html lang="en" class="fly-html-layui fly-html-store">
<head>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/layui/dist/css/layui.css">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/css/global(1).css" charset="utf-8">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/css/store.css" charset="utf-8">
    <link rel="icon" href="${APP_PATH}/statics/front/images/favicon.ico">
    <title>shop商城</title>
<body>
<!-- 顶部start -->
<div class="layui-header header header-store" style="background-color: #393D49;">
    <div class="layui-container">
        <a class="logo" href="index.html">
            <img src="${APP_PATH}/statics/front/images/logo.png" alt="layui">
        </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav" id="layui-nav-userinfo">
            <li data-id="index" class="layui-nav-item layui-hide-xs layui-this"><a class="fly-case-active" data-type="toTopNav"
                                                                        href="/index.html">首页</a></li>
            <li data-id="room" class="layui-nav-item layui-hide-xs"><a class="fly-case-active"
                                                                                  data-type="toTopNav"
                                                                                  href="/items/list.html">商品类型</a></li>
            <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/notice.html">商城公告</a></li>
            <li data-id="login" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                         href="/login.jsp">登入</a></li>
            <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/register.jsp">注册</a></li>
            <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/user/toUser.html">个人中心</a></li>
            <span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span></ul>
    </div>
</div>
<!-- 顶部end -->

<!-- 中间区域开始 -->
<div class="shop-nav shop-index">
    <!--搜索 start-->
    <div id="LAY-topbar" style="height: auto;">
            <div class="input-search">
                <div id="searchItems">
                    <input type="text" placeholder="搜索你需要的商品" name="productName" id="productNameId"
                                            autocomplete="off" value="">
                    <button class="layui-btn layui-btn-shop" style="background-color: #009688">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
                <div class="layui-container layui-hide-xs"><a href="#" class="topbar-logo">
                    <img src="${APP_PATH}/statics/front/images/logo-1.png" alt="layui"> </a></div>
            </div>
    </div>
    <!--搜索 end-->

    <div class="shop-banner">
        <!-- 左侧导航开始 -->
        <div class="layui-container layui-hide-xs">
            <div class="product-list">
                <dl id="getIndexRoomType">
                    <dt style="background-color: #009688"><a href="list.html" target="_blank">商品分类</a></dt>
                    <c:forEach var="category" items="${categoryList}">
                        <dd data-id="${category.id}">
                            <a class="fly-case-active" href="/items/list/${category.id}" data-type="toCategoryTypeList">${category.name}</a>
                        </dd>
                    </c:forEach>
                </dl>
            </div>
        </div>
        <!-- 左侧导航结束 -->

        <!-- 轮播图开始 -->
        <div class="layui-carousel" lay-filter="LAY-store-banner" id="LAY-store-banner" lay-anim lay-indicator="inside" >
            <div carousel-item>
                <div class="layui-this">
                    <div class="layui-container"><a href="javascript:;" target="_blank">
                        <img src="${APP_PATH}/statics/front/images/1.jpg" alt="shop商城"></a>
                    </div>
                </div>
                <div class="">
                    <div class="layui-container"><a href="javascript:;" target="_blank">
                        <img src="${APP_PATH}/statics/front/images/2.jpg" alt="shop商城"></a>
                    </div>
                </div>
                <div class="">
                    <div class="layui-container"><a href="javascript:;" target="_blank">
                        <img src="${APP_PATH}/statics/front/images/3.jpg" alt="shop商城"> </a>
                    </div>
                </div>
                <div class="">
                    <div class="layui-container"><a href="javascript:;" target="_blank">
                        <img src="${APP_PATH}/statics/front/images/4.jpg" alt="shop商城"> </a>
                    </div>
                </div>
                <div class="">
                    <div class="layui-container"><a href="javascript:;" target="_blank">
                        <img src="${APP_PATH}/statics/front/images/5.jpg" alt="shop商城"> </a>
                    </div>
                </div>
                <div class="">
                    <div class="layui-container"><a href="javascript:;" target="_blank">
                        <img src="${APP_PATH}/statics/front/images/6.jpg" alt="shop商城"> </a>
                    </div>
                </div>
            </div>


            <div class="layui-carousel-ind">
                <ul>
                    <li class="layui-this"></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                </ul>
            </div>
            <button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
            <button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
        </div>
        <!-- 轮播图结束 -->

        <!-- 商品分类开始 -->
        <div class="shop-temp" id="getIndexFloor">
            <c:forEach var="category" items="${categoryList}" varStatus="stauts">
                <%-- 判断当前下标是否是偶数行，如果是偶数行，div背景颜色为白色 --%>
                <c:if test="${stauts.index%2==0}">
            <div class="temp-hot">
                </c:if>
                <%-- 判断当前下标是否是奇数行，如果是奇数行，div背景颜色为灰色 --%>
                <c:if test="${stauts.index%2!=0}">
                    <div class="temp-normal"  style="background-color: #f2f2f2">
                </c:if>
                    <div class="layui-container">
                        <p class="temp-title-cn"><span></span>${category.name}<span></span></p>
                        <div class="layui-row layui-col-space20">
                            <c:forEach var="items" items="${items}">
                                <c:if test="${items.typeId == category.id}">
                                    <div data-id="${items.id}" class="layui-col-xs6 layui-col-md3">
                                        <a class="template store-list-box fly-case-active" href="/items/${items.id}.html" data-type="toItemsInfo">
                                            <img src="/shop/show/${items.photo}" class="store-list-cover">
                                            <h2 class="layui-elip">${items.productName}</h2>
                                            <h6 style="color: #272727;font-size: 12px" >${items.remark}</h6>
                                            <p> <span title="金额" style="color: #f44e2d;font-size: 16px">￥${items.price}</span></p>
                                        </a>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                </div>
                </c:forEach>
            </div>
        </div>
        <!-- 酒店楼层结束 -->
    </div>
</div>
<!-- 中间区域结束 -->

<!-- 底部 -->
<div class="fly-footer">
    <p><a href="#">shop商城</a> 2020 © <a href="#">test.cn</a></p>
    <p>
        友情链接
        <a href="http://java.goodym.cn" target="_blank">java项目源码分享网</a>
        <a href="http://www.goodym.cn/code/list/all/1/20.html" target="_blank">源码下载平台</a>
        <a href="http://www.goodym.cn/market/list/all/1/20.html" target="_blank">源码市场</a>
        <a href="http://www.goodym.cn/resumetemplate/list/1/20.html" target="_blank">简历制作</a>
        <a href="http://www.goodym.cn/forum/list/0/1/20.html" target="_blank">社区论坛</a> </p>

</div>


<!-- 脚本开始 -->
<script src="${APP_PATH}/statics/front/layui/dist/layui.js"></script>
<script src="${APP_PATH}/statics/echarts/jquery-3.1.1.min.js"></script>
<script  type="text/javascript">
    layui.use(["form","element","carousel"], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            carousel = layui.carousel,
            $ = layui.$;

        //渲染轮播图
        carousel.render({
            elem: '#LAY-store-banner'
            ,width: '100%' //设置容器宽度
            ,height: '460' //设置容器高度
            ,arrow: 'always' //始终显示箭头
        });
    });
    window.onload=function(){
        //搜索
        $("button").click(
            function() {
                var name = $("#productNameId").val()
                console.log(name)
                location.href = "/items/goods/" + name;
            }
        )
    }
</script>
<!-- 脚本结束 -->
<ul class="layui-fixbar">
    <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<div class="layui-layer-move"></div>

</body>
</html>
